xyxsw's blog

Appearance

2023-01-25    青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 9 天

前言 ​

原子化 CSS 是一个很新颖的定义 出自 https://CSS-tricks.com/lets-define-exactly-atomic-CSS/

意思是 原子化 CSS是一种 CSS的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

什么是原子化 CSS? ​

与一般的我们写正常 CSS 不同，原子化 CSS 会把元素本身的属性提取出来，加以视觉效果命名，例如：

如下的 html

html
<button class="btn">Basic</button>

正常的 CSS

css
.btn {
	padding: 1rem, 2rem;
    font-family: 'semi';
    font-weight: bold; 
}

使用原子化 CSS 后，将不用写 CSS 文件，改为写 class 属性

html
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>

市面上有不少实用至上的 CSS 框架，如 Tailwind CSS，Windi CSS 以及 Tachyons 等。

同时有些 UI 库也会附带一些 CSS 工具类作为框架的补充，如 Bootstrap 和 Chakra UI。

写之前，我们谈谈优势 ​

  • 类名自由：你绞尽脑汁想这个元素的类名怎么写。在你面前的是一点击就会变颜色的按钮，你想给他起个 class 或者 id，你想了半天，最后取了 class 名为 click-it-and-turn-it-from-blue-to-green 😰。
  • html 嵌入：正常情况我们要引入 CSS 文件去写这个样式，切来切去不太方便。
  • 预设的原子化 CSS：可以引入插件、其他基于原子化 CSS 写的组件库。
  • IDE 支持：插件支持类名提示，很好写。
  • 写的快：比如说 hover 属性，原子化 CSS 可以直接写在 class 里，很快很方便，比如说 tailwind 自带的响应式布局，不用自己写媒体查询就可以适配移动端。

常用的原子化 CSS 框架 ​

本文的重点：UnoCSS ​

讲这么多，我们终于回到主题 UnoCSS 上

antfu 重新构想原子化 CSS 这篇文章讲了 unocss 是怎么诞生的

Windi CSS 已经足够优秀，但 antfu 大佬还是不够满意，对于框架预设外的自定义工具的额外配置上，还是比较繁琐，而且配置的方式也不够简便

由于 Windi 需要与 Tailwind 兼容，它还必须使用与 Tailwind 完全相同的配置项。尽管数字推断的问题得到了解决，但如果你想添加一些自定义的工具，这将是一场噩梦。

所以经过重新构想原子化 CSS，UnoCSS 出现了

UnoCSS - 具有高性能且极具灵活性的即时原子化 CSS 引擎。

它不是像 TailWind CSS 和 Windi CSS 属于框架，而是一个引擎，它没有提供预设的原子化 CSS 工具类

UnoCSS 通过编写规则来定制工具类

静态规则

js
rules: [
	['m-1', { margin: '0.25rem' }]
]

使用正则表达式来做动态规则

ts
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d)$/, (match) => ({ padding: `${match[1] / 4}rem` })],
]

当然这些比较常见的规则 unocss 已经提供了预设在 @unocss/preset-uno 中

html
<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

生成出的 css 为

css
.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

unocss 提供了一个叫 shortcuts 的功能，可以批量生成 css

js
shortcuts: [
  // you could still have object style
  {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
  },
  // dynamic shortcuts
  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]

只需要配置这个字段

在使用中可以使用 btn-green 和 btn-red

生成的 css 如下

css
.btn-green {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgba(74, 222, 128, var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgba(220, 252, 231, var(--un-text-opacity));
}
.btn-red {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --un-bg-opacity: 1;
  background-color: rgba(248, 113, 113, var(--un-bg-opacity));
  border-radius: 0.5rem;
  --un-text-opacity: 1;
  color: rgba(254, 226, 226, var(--un-text-opacity));
}

unocss 提供了很多预设

Official Presets ​
Community Presets ​

UnoCSS 的优点 ​

对比其他原子化框架来说

  • 完全可定制：作为一款引擎没有核心实用程序，所有的功能都是通过预设提供的。

  • 扩展性强：通过各种预设组合达到 windi 或者 tailwind 的效果。

  • 快：没有解析，没有 AST，没有扫描，它是即时的。

  • 小：运行库打包好只有 6kb，无痛

  • Shortcuts：可以写 Shortcuts 来预设一些常用样式

  • Attributify mode ：将 class 写成组，避免无法阅读的问题

  • Pure CSSIcons ：纯 CSSicon 可以在 https://icones.js.org/ 找到并导入成千上万的 icon 安装只需要找到你喜欢的 iconfy 库 @iconify-json/[the-collection-you-want] 这样安装就行

  • Variant Groups ：和 Attributify mode 看起来几乎是一样的功能，写成组

  • CSSDirectives ：可以在 style 标签里写 @apply 把一系列样式打包成一个样式，在 windi 里是个很受欢迎的功能

  • Compilation mode ：打包优化，生成随机 class 名

  • Inspector ：自带的 debug 工具

  • CSS-in-JS Runtime build ：可以 CDN 导入

  • VS Code extension：自带 VSCode 提示扩展，很方便

结尾 ​

本篇我们介绍了 UnoCSS 的特点，原子化 CSS 的好处，下一篇讲讲 unocss 实战，安装使用之类的

题外话：

Anthony Fu 大佬真的是我目前的偶像，狂热的开源爱好者，人长得又帅，做的东西又好

🤣这是我在掘金搜 unocss 搜到的一篇文章中的第一句话 文章在这 https://juejin.cn/post/7028841960752283656

antfu 大佬确实也是我的偶像

22 年秋季 antfu 大佬在 b 站办过几场直播写代码，我基本上是每期必看，这个人非常有意思，有很多新鲜的点子，狠活也多 比如说

https://github.com/antfu/1990-script 这个仓库教你怎么把 GitHub 历史穿越回 1990 年🤭

他的每个 star 比较多的仓库我都体验过，感觉设计灵感真的让人眼前一亮，启发基于社区，创造更快的轮子，更好玩的轮子

https://github.com/antfu/retypewriter 这个是直播写的雏形 让写的代码在 vsc 里回放，便于理清思路

https://github.com/antfu/vue-minesweeper 这个是首次直播写的扫雷，很清晰的 vue 代码，看他写真的开窍

https://github.com/antfu/vue-starport 这个也是直播写的雏形，为了使组件有更好的过渡

就说这么多，人也长得帅

🥰😘

参考 ​

https://juejin.cn/post/7028841960752283656

https://antfu.me/posts/reimagine-atomic-css-zh

https://juejin.cn/post/7027414082378530852

https://juejin.cn/post/7161211941652791304

https://www.tailwindcss.cn/docs/

MIT Licensed | Copyright © 2021-2024 xyxsw's blog
Powered by VitePress
津ICP备2021004845号